<html>
   <head>
      <title>Sheet</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta charset="utf-8" />

      <link rel="icon" type="image/png" href="./images/favicon.png"></link>
      <link rel="stylesheet" href="./style/fonts.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/sliders.css" type="text/css"></link>
      <link rel="stylesheet" href="./visualizerFramework/visualizer.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/menu.css" type="text/css"></link>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
       #view-control {
          background: #E2E2E2;
          display: none;
       }
       .selected-for-moving-and-sizing {
          border: 2px dotted #aaf;
       }
       .button-row {
          margin: 5px;
       }
       #graphic {
          -webkit-touch-callout : none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
       }
       #overlay {
          pointer-events: none;
          background-color: rgba(0,0,0,0);
          position: absolute;
          z-index: 999999;
       }

       #tooltip {
          background-color: black;
          color: white;
          position: fixed;
          z-index: 1000000;  /* just enough to show over mapping arrows and such */
          font-size: medium;
          font-weight: bolder;
          padding: 4px 8px;
          transform: translate3d(0,0,1px);  /* works around an iPad z-level bug */
       }

       .narrow-control { width: 31%; }
       .normal-control { width: 47%; }
       .wide-control { width: 65%; }
       .huge-control { width: 96%; }

       #sheet-control {
          z-index: 999999999;
          background-color: white;
       }
       #splitter {
          z-index: 999999999;
       }
      </style>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <script type="text/x-mathjax-config">
       MathJax.Hub.Config({
          CommonHTML: {
             scale: 95,   /* scale MathJax to match the HTML around it */
          },
          showMathMenu: false,   /* disable MathJax context menu (it interferes with subsetDisplay context menu) */
       });
      </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=MML_CHTML"></script>
      <script src="https://cdn.jsdelivr.net/npm/jquery-resizable-dom@0.32.0/dist/jquery-resizable.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script>
      <script src="./lib/THREE.MeshLine.js"></script>
      <script src="./build/allGroupExplorer.js"></script>
      <script src="./build/allVisualizer.js"></script>
      <script src="./build/allSheets.js"></script>
      <script src="./Sheet.js"></script>
   </head>

   <body class="vert">
      <div id="sheet-control" class="fill-vert">
         <p class="button-row">
            <button id="loadButton" onclick="loadChosen();"
                    class="narrow-control">Load sheet:</button>
            <select id="savedSheetsList" class="wide-control"></select>
         </p>
         <p class="button-row">
            <button id="saveButton" onclick="saveAs();"
                    class="narrow-control">Save as:</button>
            <input type="text" id="filenameInput" value="My Sheet"
                   class="wide-control"/>
         </p>

         <hr/>

         <p class="button-row">
            <button id="addRectangleButton" onclick="addRectangle();"
                    class="normal-control">Add rectangle</button>
            <button id="addTextButton" onclick="addText();"
                    class="normal-control">Add text box</button>
         </p>
         <p class="button-row">
            <button id="addVisualizerButton" onclick="addVisualizer();"
                    class="huge-control">Add this visualizer:</button>
         </p>
         <p>
            <select id="visualizerList" class="normal-control">
               <option value="CD">Cayley diagram</option>
               <option value="MT">multiplication table</option>
               <option value="CG">cycle graph</option>
            </select>
            <select id="groupList" class="normal-control"></select>
         </p>

         <hr/>

         <p class="button-row">
            <button id="copyButton" onclick="copySelected();"
                    class="for-selected-element narrow-control">Copy</button>
            <button id="pasteButton" onclick="pasteItem();"
                    class="narrow-control">Paste</button>
            <button id="deleteButton" onclick="deleteSelected();"
                    class="for-selected-element narrow-control">Delete</button>
         </p>
         <p class="button-row">
            <button id="undoButton" onclick="undo();"
                    class="normal-control">Undo</button>
            <button id="redoButton" onclick="redo();"
                    class="normal-control">Redo</button>
         </p>

         <hr/>

         <p class="button-row">
            <button id="morphismButton" class="narrow-control"
                    onclick="morphismSelected();">Map to:</button>
            <select id="morphismToList">
            </select>
         </p>
         <p class="button-row">
            <button id="connectButton" class="narrow-control"
                    onclick="connectSelected();">Connect to:</button>
            <select id="connectToList">
            </select>
         </p>

         <hr/>

         <p class="button-row">
            <button id="moveUpButton" onclick="moveSelectedUp();"
                    class="for-selected-element normal-control">Move forward</button>
            <button id="moveDownButton" onclick="moveSelectedDown();"
                    class="for-selected-element normal-control">Move backward</button>
         </p>
         <p class="button-row">
            <button id="moveToTopButton" onclick="moveSelectedToTop();"
                    class="for-selected-element normal-control">Move to front</button>
            <button id="moveToBottomButton" onclick="moveSelectedToBottom();"
                    class="for-selected-element normal-control">Move to back</button>
         </p>
      </div>
   </body>
</html>
